<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div id="container"></div>
   <button id="btn-change">change</button>


   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   <script>
      var data=[
          {
              name:'张三',
              age:'20',
              address:'北京'
          },{
              name:'李四',
              age:'21',
              address:'上海'
          },{
              name:'王五',
              age:'22',
              address:'广州'
          },
      ]

      //渲染函数
      function render(data){
          //此处省略 N行
          var $container=$('#container')
          //清空容器 重要！！！
          $container.html('')

          //拼接table
          var $table=$('<table>')
            $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
            data.forEach(function(item){
                $table.append($('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.address+'</td></tr>'))
            })

          //渲染到页面
          $container.append($table)
      }


      $('#btn-change').click(function(){
          data[1].age=30
          data[2].address='深圳'

        //   re-rander  再次渲染
        render(data)
      })

      //页面加载完立刻执行(初次渲染)
      render(data)
   </script>

</body>
</html>